<template>
	<view class="dynamiPage">
		<view class="zhanwei">
			足迹数({{total}})
		</view>
		<view class="dynamiBox" v-for="(item,index) in list" :key="index">
			<view class="flexItemMain">
				<image class="flexItemLeftImg" :src="item.avatar[0]" mode="aspectFill"></image>
				<view class="flexItemCenter">
					<view class="flexItemCenterTop">
						<view class="flexItemCenterTopLeft">
							{{item.nickname}}
						</view>
						<view class="flexItemCenterTopRight">
							{{item.created_at}}
						</view>
					</view>
					<view class="flexItemCenterBottom" v-if="item.sex==2">
						<image class="sexImg" src="../../static/dongtai/sex.png"></image>
						{{item.age}}
					</view>
					<view class="flexItemCenterBottom2" v-if="item.sex==1">
						<image class="sexImg" src="../../static/pages/sex.png"></image>
						20
					</view>
					<!-- <view class="flexItemCenterBottom dizhi">
							珠海
						</view> -->
				</view>
			</view>
			<view class="xian"></view>
		</view>
		<view class="nomore">
			<view class="nomoreleft"></view>
			<view class="nomoreMiddle">没有更多了</view>
			<view class="nomoreright"></view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				total: 0,
				page: 1,
				canPagejia: true,
				canPullDownRefresh: false
			}
		},
		onLoad(option) {
			this.total = option.total
		},
		onShow() {
			this.getData()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.canPagejia = true
			this.list = []
			this.page = 1
			this.canPullDownRefresh = true
			this.getData()
		},
		onReachBottom() { //与methods 同级
			if (this.canPagejia) {
				this.page = this.page + 1
				this.getData()
			}
		},
		methods: {
			getData() {
				let that = this
				this.$utils.postrequest("/api/user_center/footprintList", {
					page: this.page
				}, function(res) {
					if (res.code == 200) {
						if (res.data.length > 0) {
							res.data.forEach((item) => {
								item.avatar = JSON.parse(item.avatar)
							})
						} else {
							that.canPagejia = false
						}
						if (that.canPullDownRefresh) {
							uni.stopPullDownRefresh(); //停止下拉刷新动画
						}
						that.list = that.list.concat(res.data)

					}
				})
			}

		}
	}
</script>
<style scoped>
	page {
		width: 100%;
		height: 100%;
		background: #fff;
	}

	.flexItemMain {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.nomore {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
	}

	.nomoreMiddle {
		font-size: 22rpx;
		font-family: PingFang SC;
		
		color: #C7C8DB;

	}

	.nomoreleft {
		width: 37rpx;
		height: 1rpx;
		background: #DCDDF3;
		margin-right: 18rpx;
	}

	.nomoreright {
		width: 37rpx;
		height: 1rpx;
		background: #DCDDF3;
		margin-left: 18rpx;
	}

	.flexItemLeft {
		flex: none;
		border-radius: 100%;
		overflow: hidden;
		width: 60rpx;
		height: 60rpx;
		margin-left: 30rpx;
		margin-right: 20rpx;
	}

	.flexItemLeftImg {
		border-radius: 100%;
		flex: none;
		width: 110rpx;
		height: 110rpx;
		margin-left: 31rpx;
		margin-right: 15rpx;
	}

	.flexItemLeft image {
		width: 100%;
		height: 100%;
	}

	.flexItemCenter {
		flex: auto;
		text-align: left;
	}

	.flexItemCenterTop {
		font-size: 28rpx;
		font-weight: bold;
		color: #2B2937;
		display: flex;
	}

	.flexItemCenterTopLeft {
		flex: auto;
	}

	.flexItemCenterTopRight {
		flex: none;
		margin-right: 31rpx;
		text-align: right;
		font-size: 23rpx;
		font-weight: bold;
		color: #9C9AA7;
	}

	.flexItemCenterBottom {
		color: #fff;
		font-size: 14rpx;
		/* width: 64rpx; */
		display: inline-block;
		padding-right: 16rpx;
		height: 33rpx;
		background: linear-gradient(-86deg, #FF8AB4, #FD73A3);
		border-radius: 17rpx;
	}

	.flexItemCenterBottom2 {
		color: #fff;
		font-size: 14rpx;
		/* width: 64rpx; */
		display: inline-block;
		padding-right: 16rpx;
		height: 33rpx;
		background: linear-gradient(-90deg, #5FCAFF, #5B8DFE);
		border-radius: 17rpx;
	}

	.sexImg {
		width: 16rpx;
		height: 16rpx;
		margin-left: 12rpx;
		margin-right: 4rpx;
	}

	.dizhi {
		margin-left: 10rpx;
		text-align: center !important;
		padding-left: 15rpx;
	}

	.flexItemRight {
		flex: none;
		font-weight: bold;
		font-size: 14rpx;
	}

	.flexItemRightImg {
		width: 152rpx;
		height: 79rpx;
		flex: none;
		margin-right: 31rpx;
	}

	.zhanwei {
		font-size: 23rpx;
		font-family: PingFang SC;
		font-weight: bold;
		padding-left: 33rpx;
		color: #A3A4AD;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		background: #F6F5FA;
		margin-bottom: 24rpx;
	}

	.xian {
		margin: 22rpx 31rpx 24rpx 30rpx;
		height: 2rpx;
		background: #DDDDDD;
	}
</style>
